<template>
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0 mb-5">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 公告管理</p>
          </div>

          <div class="form-inline col-12">
            <div class="col-6">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#Notice_add">
                <span style="width: 140px;height: 40px">新增公告</span>
              </button>
              <!-- Modal -->
              <div class="modal fade mt-5" id="Notice_add" tabindex="-1" aria-labelledby="Notice_add_label" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h6 class="modal-title" id="Notice_add_label">新增公告</h6>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body" >
                      <div class="" >
                        <div class="col-9 ml-4 mb-4 form-inline">
                          <div class="col-4" align="right">排序&emsp;</div>
                          <div class="col-5" align="left"><input type="text" class="form-control"></input></div>
                        </div>
                        <div class="col-9 ml-4 mb-4 form-inline">
                          <div class="col-4" align="right"><span>公告标题&nbsp;<span style="color: red">*</span></span></div>
                          <div class="col-5" align="left"><input type="text" class="form-control" v-model="announcements.title"></input></div>
                        </div>

                        <div class="col-9 ml-4 mb-4 form-inline">
                          <div class="col-4" align="right"><span>公告内容&nbsp;<span style="color: red">*</span></span></div>
                          <div class="col-5" align="left"><textarea type="text" class="form-control" v-model="announcements.content"></textarea></div>
                        </div>

                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" @click="addAnnouncements">保存</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                    </div>
                  </div>
                </div>
              </div>&emsp;
            </div>
          </div>

          <div class="col-12 mt-4">
            <table class="table table-striped table-hover" >
              <thead>
              <tr>
                <th>排序</th>
                <th>公告标题</th>
                <th>发布时间</th>
                <th>公告内容</th>
                <th>显示状态</th>
                <th>操作</th>
              </tr>
              </thead>

              <tbody>
              <tr v-for="(item,index) in announcementsList.list" :key="index">
                <td>{{item.sortId}}</td>
                <td>{{item.title}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.content}}</td>
                <td v-if="item.status == 1">
                  <el-switch v-model="status" />
                </td>
                <td v-else>
                  <el-switch v-model="statusquy" />
                </td>
                <td>
                  <!-- Button trigger modal -->
                  <button type="button" class="btn btn-outline-secondary btn-sm"  data-toggle="modal" data-target="#Notice_edit" @click="getAnnouncements(item.id)">
                    <span style="font-size: 13px">编辑</span>
                  </button>
                  <!-- Modal -->
                  <div class="modal fade mt-5" id="Notice_edit" tabindex="-1" aria-labelledby="Notice_edit_label" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title" id="Notice_edit_label">编辑公告</h6>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body" >
                          <div class="" >
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right">排序&emsp;</div>
                              <div class="col-5" align="left"><input type="text" class="form-control" v-model="announcements.sortId"></input></div>
                            </div>
                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>公告标题&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><input type="text" class="form-control" v-model="announcements.title"></input></div>
                            </div>

                            <div class="col-9 ml-4 mb-4 form-inline">
                              <div class="col-4" align="right"><span>公告内容&nbsp;<span style="color: red">*</span></span></div>
                              <div class="col-5" align="left"><textarea type="text" class="form-control" v-model="announcements.content"></textarea></div>
                            </div>

                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-primary" @click="editAnnouncements">保存</button>
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                      </div>
                    </div>
                  </div>&emsp;
                  <button type="button" class="btn btn-outline-danger btn-sm" @click="removeAnnouncements(item.id)"><span style="font-size: 13px" >删除</span></button>
                </td>
              </tr>
              </tbody>
            </table>
            <!--分页组件-->
            <nav aria-label="Page navigation example">
              <ul class="pagination" >
                <li class="page-item" >
                  <a class="page-link"  aria-label="Previous" @click="selectPage(announcementsList.prePage)">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li class="page-item"><a class="page-link" @click="selectPage(1)">1</a></li>
                <li class="page-item"><a class="page-link" @click="selectPage(2)">2</a></li>
                <li class="page-item"><a class="page-link" @click="selectPage(3)">3</a></li>
                <li class="page-item">
                  <a class="page-link" aria-label="Next" @click="selectPage(announcementsList.nextPage)">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../utils/axios";
export default {
  name: "NoticeSettings",
  data() {
    return {
      announcements : {
        title: null,
        content: null,
        sortId: 1,
        status: 1,
        id : 1
      },
      status: true,
      statusquy : false,
      announcementsList : null,
      page : null
    }
  },
  methods: {
    addAnnouncements : function () {
      service.post("/announcements/addAnnouncements",{
        "title": this.announcements.title,
        "sortId": this.announcements.sortId,
        "content": this.announcements.content,
        "status": this.announcements.status
      }).then(data => {
        this.selectPage(1);
      }).catch(error => {
        alert("失败");
      })
    }
    ,
    getAnnouncements : function (id){
      service.get("/announcements/getAnnouncements",{
       params : {
         "id" : id
       }
      }).then(data => {
        this.announcements=data.data.data;
      }).catch(error => {
        alert("失败");
      })
    }
    ,
    selectPage : function (pageNum){
      service.get("/announcements/selectPage",{
        params:{
          "pageNum": pageNum,
          "title" : this.announcements.title,
          "content" : this.announcements.content
        }
      }).then(data => {
        this.announcementsList = data.data.data;
      })
      .catch(error=>{
        alert("出现错误!");
      })
    },
    editAnnouncements : function (){
      service.put("/announcements/editAnnouncements",{
        "content" : this.announcements.content,
        "title" : this.announcements.title,
        "id" : this.announcements.id,
        "sortId" : this.announcements.sortId,
        "status" : this.announcements.status
      })
      .then(data=>{
        this.selectPage(1);
      })
      .catch(error=>{
        alert("失败");
      })

    },
    removeAnnouncements : function (id){
      service.delete("/announcements/removeAnnouncements",{
        params : {
            "id" : id
          }
      })
        .then(data=>{
          this.selectPage(1);
        })
        .catch(error=>{
          alert("失败");
        })
    }

  },
  created() {
    this.selectPage(1);
  }
}
</script>

<style scoped>

</style>
